<template>
  <div class="home-container">
    <el-row class="tac" type="flex">
      <el-col :span="4" class="sidebar-col">
        <el-menu default-active="/HomeView/dashboard" class="el-menu-vertical-demo" background-color="#545c64"
          text-color="#fff" active-text-color="#ffd04b" router :default-openeds="['1']">

          <el-sub-menu index="1">
            <template #title>
              <el-icon>
                <location />
              </el-icon>
              <span>导航菜单</span>
            </template>
            <el-menu-item index="/HomeView/dashboard">
              <el-icon><icon-menu /></el-icon>
              <span>仪表盘</span>
            </el-menu-item>
            <el-menu-item index="/HomeView/pakingPort">
              <el-icon>
                <document />
              </el-icon>
              <span>停车场</span>
            </el-menu-item>
            <el-menu-item index="/HomeView/observeScreen">
              <el-icon><full-screen /></el-icon>
              <span>监测大屏</span>
            </el-menu-item>
            <el-menu-item index="/HomeView/writtingArtices">
              <el-icon>
                <Edit />
              </el-icon>
              <span>文章</span>
            </el-menu-item>
            <el-menu-item index="/HomeView/wpsView">
              <el-icon>
                <EditPen />
              </el-icon>
              <span>打字</span>
            </el-menu-item>
            <el-menu-item index="/HomeView/drawView">
              <el-icon>
                <EditPen />
              </el-icon>
              <span>绘画</span>
            </el-menu-item>
        
          </el-sub-menu>

          <el-sub-menu index="2">
            <template #title>
              <el-icon>
                <setting />
              </el-icon>
              <span>设置</span>
            </template>
            <el-menu-item index="/HomeView/settings/personDetail">
              <el-icon><user-filled /></el-icon>
              <span>个人资料</span>
            </el-menu-item>
            <el-menu-item index="/HomeView/settings/accountSetting">
              <el-icon>
                <user />
              </el-icon>
              <span>账号设置</span>
            </el-menu-item>
            <el-menu-item index="/HomeView/settings/messageSetting">
              <el-icon>
                <Message />
              </el-icon>
              <span>消息设置</span>
            </el-menu-item>
            <el-menu-item index="/HomeView/settings/generalSetting">
              <el-icon>
                <Setting />
              </el-icon>
              <span>通用设置</span>
            </el-menu-item>
          </el-sub-menu>

          <el-menu-item index="/HomeView/mineView">
            <el-icon>
              <avatar />
            </el-icon>
            <span>我的</span>
          </el-menu-item>
        </el-menu>
      </el-col>
      <el-col :span="20" class="content-col">
        <router-view></router-view>
      </el-col>
    </el-row>
  </div>
</template>

<script setup>

import {
  Document,
  Menu as IconMenu,
  Location,
  Setting,
  FullScreen,
  UserFilled,
  User,
  Avatar,
  Message,
  EditPen,
  Edit
} from '@element-plus/icons-vue'
</script>

<style scoped>
.home-container {
  display: flex;
  height: 100vh;
  overflow: hidden;
}

.tac {
  width: 100%;
  height: 100%;
  margin: 0;
}

.sidebar-col {
  height: 100vh;
  width: 50vw;
  background-color: #545c64;
  position: fixed;
  left: 0;
  top: 0;
  bottom: 0;
  z-index: 100;
}

.el-menu-vertical-demo {
  height: 100%;
  border-right: none;
  /* overflow-y: auto; */
}

.content-col {
  margin-left: 16.6667%;
  width: 83.3333%;
  height: 100vh;
  padding: 0;
}

.content-wrapper {
  height: 100%;
  padding: 20px;
  /* overflow-y: auto; */
}
</style>
